<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/googlemaps.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../src/js/googlemaps.js"></script>
    <script language="javascript">
      $(document).ready(function() {
        $("blockquote").each(function() {
          eval($(this).text());
        });
      });
    </script>
  </head>
  <body>
  
    <h1>Search closest marker</h1>
    <div id="map5" class="map"></div>
    <blockquote>
      var map5 = $("#map5").googlemaps();
      map5.setCenterAtLocation(52.258071, 5.372314, 7);
      var addresses = [
        "Zwolle",
        "Breda",
        "Rotterdam",
        "Amsterdam",
        "Leiden",
        "Arnhem",
        "Utrecht",
        "Groningen",
        "Eindhoven",
        "Den Haag"
      ];
      /* PUT MARKERS AT ADDRESSES */
      var markers = new Array();
      for(var i in addresses) {
        map5.setMarkerAtAddress(addresses[i], function(marker) {
          markers.push(marker);
          map5.setMarkerClick(marker, function() {
            map5.closeAllInfoWindows();
            map5.setInfoWindowAtMarker(this, "Address: " + this.options.address);
          });
        }, undefined, { address : addresses[i] });
      }
      /* ON SEARCH ADDRESS */
      $("#map5_address_submit").click(function(event) {
        event.preventDefault();
        var searchAddress = $("#map5_address_input").val();
        map5.setMarkerAtAddress(searchAddress, function(searchMarker) {
          map5.getDistances(searchMarker, markers, function(d) {
            map5.setCenterAtMarker(d[0].marker, 11);
          }, 3);
        }, function() {
          // can't find address
        }, { visible : false });
      });
    </blockquote>
    <div>
      <input type="text" placeholder="Put your netherland's address" id="map5_address_input" />
      <input type="submit" value="Search" id="map5_address_submit" />
    </div>
    
  </body>
</html>